<template>
  <flopBoard :flopData="flopData" />

  <q-card flat>
    <q-card-section class="flex items-center">
      <q-icon name="stars" size="sm" color="grey-9" class="q-mr-sm" />
      <div class="text-body1 text-bold">本月租户活跃度Top10</div>
    </q-card-section>

    <q-separator />

    <q-card-section>
      <chart id="liveness" :option="liveness.chartOption" ref="livenessChart" height="300px" />
    </q-card-section>
  </q-card>

</template>

<script>
import { defineComponent, ref } from 'vue';
import { useStore } from 'stores/store';
import { mapState, mapActions } from 'pinia';
import flopBoard from './flopMBoard.vue';
import chart from 'src/components/echarts.vue';

export default defineComponent({
  name: 'managerDashboardPage',
  components: {
    flopBoard,
    chart
  },
  data () {
    return {
      flopData: {},
      liveness: {
        chartOption: {}
      }
    }
  },
  mounted () {
    this.refresh();
  },
  methods: {
    refresh () {
      this.$axios.get('/c2/manager/dashboard/managerAbstract').then(({ data }) => {
        this.refreshLiveness(data.liveness);
        this.flopData = data.flop;
      });
    },
    // 生成活跃度柱状图
    refreshLiveness (data) {
      this.liveness.chartOption = {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '5%'
        },
        xAxis: {
          type: 'category',
          data: data.map(v => v.tenant_name)
        },
        yAxis: {
          type: 'value',
          max: 100,
          min: 0
        },
        series: [
          {
            data: data.map(v => v.liveness),
            type: 'bar',
            itemStyle: {
              borderRadius: [10, 10, 0, 0]
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
    }
  }
});
</script>
